<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive } from 'vue'
import { useUserStore } from '@/stores/modules/user'
import { getTopMenu, initRouter } from '@/router/utils'
import router from '@/router'
// import { useRouter } from 'vue-router'
defineOptions({
  name: 'Login'
})
// const router = useRouter()
const loading = ref(false)
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  username: 'admin',
  password: 'admin123'
})
const REGEXP_PWD =
  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/

const loginRules = reactive(<FormRules>{
  password: [
    {
      validator: (_rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else if (!REGEXP_PWD.test(value)) {
          callback(new Error('密码格式应为8-18位数字、字母、符号的任意两种组合'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

const onLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      loading.value = true
      useUserStore()
        .login(ruleForm)
        .then(() => {
          initRouter().then(() => {
            router.push(getTopMenu()?.path)
          })
        })
        .finally(() => (loading.value = false))
    }
  })
}
</script>
<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-form">
        <h2>Sign in</h2>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="loginRules" size="large">
          <el-form-item
            :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]"
            prop="username"
          >
            <el-input
              v-model="ruleForm.username"
              clearable
              placeholder="Email"
              prefix-icon="User"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              clearable
              show-password
              placeholder="Password"
              prefix-icon="Lock"
            />
          </el-form-item>

          <div class="flex justify-between mb-4">
            <el-link type="primary">Forgot password?</el-link>
          </div>

          <el-button class="w-full" type="primary" :loading="loading" @click="onLogin(ruleFormRef)">
            Sign in
          </el-button>
        </el-form>

        <div class="mt-4 text-center">
          <span class="text-gray-500">Don't have an account? </span>
          <el-link type="primary">Sign up</el-link>
        </div>

        <div class="mt-8 text-center text-gray-400 text-sm">
          <span class="mx-2">Terms & Conditions</span>
          <span>·</span>
          <span class="mx-2">Privacy Policy</span>
        </div>
      </div>
    </div>

    <div class="slider-content">
      <div class="background-shapes"></div>
      <div class="content-card">
        <el-carousel height="100%" indicator-position="outside">
          <el-carousel-item>
            <div class="carousel-item">
              <h3>New car type in London</h3>
              <p>
                We have a great news for our dear customers! Now you can see our branded Standard
                cars around the London city.
              </p>
              <el-button type="primary" plain>Get more</el-button>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: #fff;
}

.login-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form {
  width: 360px;
  padding: 20px;

  h2 {
    font-size: 24px;
    margin-bottom: 32px;
    font-weight: 500;
  }
}

.slider-content {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2468f2 0%, #4b9eff 100%);
  clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%, 0 80px);
}

.content-card {
  width: 90%;
  max-width: 500px;
  aspect-ratio: 4/3;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

  .carousel-item {
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    img {
      width: 60%;
      margin-bottom: 24px;
    }

    h3 {
      font-size: 20px;
      margin-bottom: 16px;
      color: #333;
    }

    p {
      color: #666;
      line-height: 1.6;
      margin-bottom: 24px;
    }
  }
}

.background-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

  &::before {
    content: '';
    position: absolute;
    top: 10%;
    right: 10%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: morphing 15s ease-in-out infinite;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 15%;
    left: 15%;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    animation: floating 6s ease-in-out infinite;
  }
}

@keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }

  25% {
    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
  }

  50% {
    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
  }

  75% {
    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
  }

  100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

@media screen and (max-width: 768px) {
  .slider-content {
    display: none;
  }
}
</style>
